<template>
  <div class="user-info">
    <div class="title">基本资料</div>
    <Button type="default" class="cancle-button" :disabled="!ischange" name="button" @click="ischange?saveChange():''">取消</Button>
    <Button type="primary" class="change-button" name="button" @click="saveChange">{{saveWord}}</Button>
    <div class="box-info">
      <div class="base">
        <!-- <div class="photo"><img src="../../assets/images/menber1.jpg" /></div> -->
        <!-- <Button class="button" name="button">修改头像</Button> -->
        <div class="base-form form-type">
          <h5>个人信息</h5>
          <Form :model="baseInfo" :label-width="80">
            <FormItem label="姓名: ">
              <Input v-if="ischange" v-model="baseInfo.name" :placeholder="baseInfo.name"></Input>
              <span v-else class="no-change">{{baseInfo.name}}</span>
            </FormItem>
            <FormItem label="性别: ">
              <RadioGroup v-if="ischange" v-model="baseInfo.male">
                <Radio label="male">男</Radio>
                <Radio label="female">女</Radio>
              </RadioGroup>
              <span v-else class="no-change">{{baseInfo.male ==='male'?'男':'女'}}</span>
            </FormItem>
            <FormItem label="年龄: ">
              <Input v-if="ischange" v-model="baseInfo.age"></Input>
              <span v-else class="no-change">{{baseInfo.age}}</span>
            </FormItem>
            <FormItem label="出生日期: ">
              <Input v-if="ischange" v-model="baseInfo.bornthday"></Input>
              <span v-else class="no-change">{{baseInfo.bornthday}}</span>
            </FormItem>
          </Form>
        </div>
        <div class="form-type">
          <h5>联系方式</h5>
          <Form class="concat" :model="concat" :label-width="80">
            <FormItem label="电话:">
              <Input v-if="ischange" v-model="concat.phone"></Input>
              <span v-else class="no-change">{{concat.phone}}</span>
            </FormItem>
            <FormItem label="邮箱:">
              <Input v-if="ischange" type="email" v-model="concat.email"></Input>
              <span v-else class="no-change">{{concat.email}}</span>
            </FormItem>
            <FormItem label="微信:">
              <Input v-if="ischange" v-model="concat.wechat"></Input>
              <span v-else class="no-change">{{concat.wechat}}</span>
            </FormItem>
          </Form>
        </div>
      </div>
      <div class="info">
        <div class="form-type">
          <h5>工作状态</h5>
          <Form class="work-info" :model="workInfo" :label-width="80">
            <FormItem label="入职时间:">
              <Input v-if="ischange" v-model="workInfo.date"></Input>
              <span v-else class="no-change">{{workInfo.date}}</span>
            </FormItem>
            <FormItem label="所在组:">
              <Select v-if="ischange" v-model="workInfo.group">
                <Option v-for="item in groupList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
              <span v-else class="no-change">{{workInfo.group}}</span>
            </FormItem>
            <FormItem label="在职状态:">
              <Select v-if="ischange" v-model="workInfo.state">
                <Option v-for="item in stateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
              <span v-else class="no-change">{{workInfo.state}}</span>
            </FormItem>
            <FormItem label="工作内容:">
              <Input v-if="ischange" v-model="workInfo.duties" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="浦发第五轮测试bug修改"></Input>
              <span v-else class="no-change">{{workInfo.duties?workInfo.duties:'浦发第五轮测试bug修改'}}</span>
            </FormItem>
          </Form>
        </div>
        <div class="form-type">
          <h5>生活娱乐</h5>
          <Form class="life-info" :model="lifeInfo" :label-width="80">
            <FormItem label="签名:">
              <Input v-if="ischange" v-model="lifeInfo.autograph" type="textarea" :autosize="{minRows: 1,maxRows: 2}" placeholder="最多输入30个字"></Input>
              <span v-else class="no-change">{{lifeInfo.autograph?lifeInfo.autograph:'最多输入30个字'}}</span>
            </FormItem>
            <FormItem label="生活主页:">
              <Input v-if="ischange" v-model="lifeInfo.daily" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="http://www.baidu.com"></Input>
              <span v-else class="no-change">{{lifeInfo.daily?lifeInfo.daily:'http://www.baidu.com'}}</span>
            </FormItem>
            <FormItem label="技术分享:">
              <Input v-if="ischange" v-model="lifeInfo.technique" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="https://www.cnblogs.com/"></Input>
              <span v-else class="no-change">{{lifeInfo.technique?lifeInfo.technique:'https://www.cnblogs.com/'}}</span>
            </FormItem>
          </Form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseInfo: {
        name: 'ybx',
        male: 'female',
        age: 22,
        bornthday: '2018-03-09'
      },
      concat: {
        phone: '674363782',
        email: 'email',
        wechat: 'wechat'
      },
      workInfo: {
        date: '2018-03-09',
        group: '技术组',
        state: '在职',
        duties: ''
      },
      groupList: [
        {
          value: '技术组',
          label: '技术组'
        },
        {
          value: '业务一组',
          label: '业务一组'
        },
        {
          value: '业务二组',
          label: '业务二组'
        },
        {
          value: '业务三组',
          label: '业务三组'
        }
      ],
      stateList: [
        {
          value: '在职',
          label: '在职'
        },
        {
          value: '请假',
          label: '请假'
        },
        {
          value: '离职',
          label: '离职'
        }
      ],
      lifeInfo: {
        daily: '',
        technique: '',
        autograph: ''
      },
      saveWord: '修改',
      ischange: false
    }
  },
  methods: {
    saveChange() {
      this.saveWord = this.ischange ? '修改' : '保存'
      this.ischange = !this.ischange
    }
  }
}
</script>

<style lang="less" scoped>
.user-info {
  width: 100%;
  height: ~'calc(100% - 24px)';
  .title {
    font-weight: 500;
    height: 60px;
    line-height: 40px;
    font-size: 20px;
    padding: 20px 0 0 20px;
    border-bottom: 1px solid #ccc
  }
}

.box-info {
  width: 100%;
  height: ~'calc(100% - 130px)';
  display: flex;
  padding: 40px 100px;
}

.base {
  width: 40%;
  margin-left: 50px;
  .photo {
    margin: 0 80px 40px;
    text-align: center;
    width: 240px;
    height: 240px;
    background-color: #aaa;
    img {
      width: 100%;
      height: 100%
    }
  }
  .button {
    margin-left: 170px
  }
  .concat,
  .base-form {
    width: 80%;
    &.form-type {
      margin-bottom: 60px;
    }
  }
}

.info {
  width: 40%;
  margin-left: 20px;
  min-width: 340px;
  .work-info {
    width: 80%;
    margin-bottom: 60px;
  }
}


.form-type {
  h5 {
    font-weight: 700;
    font-size: 16px;
    padding: 0 0 25px 20px;
  }
}

.cancle-button,
.change-button {
  float: right;
  margin: 30px 15px 20px
}

.cancle-button {
  margin-right: 70px
}

.no-change {
  display: inline-block;
  width: 100%;
  height: 32px;
  line-height: 21px;
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid #dddee1;
  border-radius: 4px;
  color: #495060;
  background-image: none;
  position: relative;
  cursor: text;
}
</style>
